<template>
  <view class="KickDialog">
    <view
      :class="['kickInput', isActive ? 'kickInputActive' : '']"
      :style="{
        left: initPosition.left - 75 + 'px',
        top: initPosition.top - 5 + 'px',
        width: 66 + 'px',
      }"
    >
      <text style="font-size: 26rpx; color: #999">{{
        memberDetail.nickName
      }}</text>
      <image
        src="../../../static/icons/arrow.png"
        :class="['arrowIcon', isOpen ? 'arrowActive' : '']"
        @click="isOpen = !isOpen"
      ></image>
      <view :class="['options', isOpen ? 'optionsActive' : '']">
        <scroll-view scroll-y="true" class="scrollY">
          <view
            class="optionItem animate__animated animate__bounceInRight"
            v-for="(item, index) in teamMember"
            :key="index"
            @click="chooseMember(item)"
          >
            <image :src="item.avatar" class="avatar"></image>
            <view class="nickName">{{ item.nickName }}</view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view :class="['KickBox', bgActive ? 'kickBoxActive' : '']">
      <view class="title">选择踢出的成员</view>
      <!-- 占位用 -->
      <view class="tempPosition"></view>

      <view class="btn">
        <van-button
          block
          size="small"
          type="primary"
          color="#aaa"
          @click="closeKickDialog"
          >取消</van-button
        >
        <van-button
          block
          size="small"
          color="#05A47D"
          @click="handleConfirmTeamMember"
          >确认</van-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { TeamMessage } from "../../../utils/messageController.js";
export default {
  name: "KickDialog",
  props: {
    initPosition: Object,
    teamInfo: Object,
  },
  data() {
    return {
      isActive: false,
      bgActive: false,
      isOpen: false,
      isFirst: true,
      memberDetail: {},
    };
  },
  computed: { ...mapState(["teamMember"]) },
  mounted() {
    this.initPositionData();
    this.$store.commit("clearTeamMember");
  },
  watch: {
    isOpen(newValue) {
      if (newValue) {
        this.getMemberData();
      }
    },
  },
  methods: {
    // 关闭窗口
    closeKickDialog() {
      const refresh = false;
      this.isFirst = true;
      this.$store.commit("clearTeamMember");
      this.$emit("closeKickDialog", refresh);
    },
    // 初始化动画移动位置
    initPositionData() {
      setTimeout(() => {
        this.isActive = true;
      }, 0);
      setTimeout(() => {
        this.bgActive = true;
      }, 700);
    },

    // 获取队伍成员信息
    async getMemberData() {
      if (this.isFirst) {
        // 先将保留的成员信息清空
        this.$store.commit("clearTeamMember");
        for (let i = 0; i < this.teamInfo.userList.length; i++) {
          const userId = this.teamInfo.userList[i],
            type = 2;
          await this.$store.dispatch("getUserInfo", { type, userId });
        }
        this.isFirst = false;
      }
    },

    // 选择要踢出的人员
    chooseMember(item) {
      this.memberDetail = item;
      this.isOpen = false;
    },
    // 确认要踢出队员
    async handleConfirmTeamMember() {
      const teamId = this.teamInfo.teamId,
        messageBox = new TeamMessage(),
        userList = [],
        messageItem = {},
        refresh = true,
        userId = this.memberDetail._openid;
      messageItem.receiveId = this.memberDetail._openid;
      messageItem.teamAuthor = this.teamInfo.teamAuthor;
      messageItem.teamName = this.teamInfo.teamName;
      userList.push(this.memberDetail._openid);
      try {
        await this.$store.dispatch("m_team/kickTeamPeople", {
          teamId,
          userList,
        });
        await this.$store.dispatch("m_team/refuseJoinTeam", { userId, teamId });
        await this.$store.dispatch(
          "m_message/sendMessage",
          messageBox.messageForKick(messageItem)
        );
        uni.showToast({
          icon: "success",
          title: "踢出成功",
        });
        this.isFirst = true;
        this.$store.commit("clearTeamMember");
        this.$emit("closeKickDialog", refresh);
      } catch (err) {
        console.log(err);
        uni.showToast({
          icon: "error",
          title: "踢出失败",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.KickDialog {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  transition: all 0.5s;
  background-color: rgba(0, 0, 0, 0.6);
  .KickBox {
    background-color: #fff;
    padding: 20rpx;
    width: 360rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 10rpx;
    opacity: 0;
    transition: all 0.5s;
    transform: translateY(20rpx);
    .title {
      font-size: 30rpx;
      font-weight: 500;
    }
    .tempPosition {
      width: 300rpx;
      height: 60rpx;
      margin: 10rpx 0;
    }

    .btn {
      width: 100%;
      display: flex;
      justify-content: space-around;
      margin-top: 20rpx;
    }
  }
  .kickBoxActive {
    opacity: 1;
  }
  .kickInput {
    height: 60rpx;
    border-radius: 5rpx;
    border: 1px solid #eee;
    background-color: #fff;
    padding: 5rpx 10rpx;
    box-sizing: border-box;
    position: absolute;
    margin: 10rpx 0;
    transition: all 0.5s;
    opacity: 1;
    z-index: 10000;
    .arrowIcon {
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      top: 10rpx;
      right: 20rpx;
      transition: all 0.5s;
    }
    .arrowActive {
      transform: rotateZ(180deg);
    }
    .options {
      position: absolute;
      bottom: -350rpx;
      left: -20rpx;
      background-color: #fff;
      border-radius: 10rpx;
      width: 100%;
      padding: 20rpx;
      height: 300rpx;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
      font-size: 28rpx;
      color: #606266;
      transition: all 0.5s;
      opacity: 0;
      transform: scale(0);
      .optionItem {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        .avatar {
          margin-right: 10rpx;
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
        }
      }
      .scrollY {
        height: 100%;
      }
    }
    .optionsActive {
      opacity: 1;
      transform: scale(1);
    }
  }
  .kickInputActive {
    top: 50% !important;
    left: 50% !important;
    width: 300rpx !important;
    transform: translate(-50%, -50%);
    background-color: none !important;
  }
}
</style>
